<template>
   <div class="all1">
      <div class="box">
         <div class="title1" >
            预招生档案
         </div>
         <div class="details1" @click="handleclick">
            查看详情
         </div>
      </div>
      <div class="box">
         <div class="title1">
            在习生/毕业生档案
         </div>
         <div class="details1" @click="handleclick1">
            查看详情
         </div>
      </div>
   </div>
</template>


<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
// 点击查看详情
const handleclick = () => {
    // 跳转
   
    
    
    router.push('/allTotal/PreEnrollment')  
}
const handleclick1 = () => {
    // 跳转
    router.push('/allTotal/Graduate') 
}
</script>

<style scoped> 
.all1 {
  height: 100%;
  background-color: aliceblue;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box{
  width: 350px;
  height: 350px;
  background-color: #fff;
  /* 阴影 */
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 40px;
  border-radius: 25px;
  transition: all 0.3s ease;
}
.box:hover {
  transform: scale(1.02);
  box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.title1{
  font-size: 25px;
  margin-bottom: 20px;
}
.details1{
  color: #84ABEC;
  cursor: pointer;
  font-size: 20px;
}
.details1:hover{
  color: #007bff; 
  transform: scale(1); /* 保持按钮悬停效果不变 */
}
.oneafter{
   background-color: #e7f0f7;
  border-right: 2px solid #007bff;
  color: #3e84bf;
}

</style>